<template>
  <div>
    <!--组件在设计器中的样子-->
    <div v-if="mode === 'DESIGN'">
      <el-select :value="arrayValue" :multiple="multiple" :placeholder="placeholder" disabled
        clearable :loading="loading" style="width:100%" @change="selectChange">
        <el-option v-for="(op, index) in dictOptions" :key="index" :value="op.value" :label="op.text"></el-option>
      </el-select>    
    </div>
    <div v-else>
      <!--组件在流程实例预览中-->
      <template v-if="!readerMode">
        <el-select :value="arrayValue" :multiple="multiple" :placeholder="placeholder"
          clearable :loading="loading" style="width:100%" @change="selectChange">
          <el-option v-for="(op, index) in dictOptions" :key="index" :value="op.value" :label="op.text"></el-option>
        </el-select>
      </template>
      <template v-else></template>
    </div>
  </div>
</template>

<script>
  //混入配置
  // import componentMinxins from '../ComponentMinxins'
  import {
    ajaxGetDictItems,
    getDictItemsFromCache
  } from '@/api/api'
  import {
    simpleDebounce
  } from '@/utils/util'
  import {
    getAction
  } from '@/api/manage'
  export default {
    name: "MultiSelectPicker", //多选下拉选择
    components: {},
    props: {
      mode: {
        type: String,
        default: 'DESIGN'
      },
      required: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '请选择'
      },
      value: String,
      options: Array,
      multiple: {
        type: Boolean,
        default: true
      },
      dicCode: {
        type: String,
      },
      readerMode: {
        type: Boolean,
        default: false
      },
      pageSize: { //默认查询20条
        type: Number,
        default: 20
      },
      spliter: {
        type: String,
        required: false,
        default: ','
      },
    },
    data() {
      return {
        loading: false,
        dictOptions: [], //数据源
        list: [],
        arrayValue: !this.value ? [] : this.value.split(this.spliter),
        textStrData:[],
      }
    },
    watch: {
      // options: function(val) {
      //   this.setCurrentDictOptions(val);
      // },
      // dicCode: {
      //   immediate: true,
      //   handler(value) {        
      //     if (value) {
      //       this.initDictData()
      //     }
      //   },
      // },
      value(val) { 
        if (!val) {
          this.arrayValue = []
          this.dictOptions = []
        } else {
          this.arrayValue = this.value.split(this.spliter)
        }
      }
    },
  mounted() {
     if(this.dicCode){
      this.initDictData()
     }
     this.textStrData=[]
  },
    methods: {
      //初始数据
      initDictData() {  
        if (this.options && this.options.length > 0) {
          this.dictOptions = [...this.options]
        } else {
          //优先从缓存中读取字典配置
          let cacheOption = getDictItemsFromCache(this.dicCode)
          if (cacheOption && cacheOption.length > 0) {
            this.dictOptions = cacheOption
            return
          }
          //根据字典Code, 初始化字典数组
          ajaxGetDictItems(this.dicCode, null).then((res) => { 
            if (res.success) {
              this.dictOptions = res.result ? res.result : []
            } else {
              this.$message.warning(res.message);
            }
          })
        }
      },
      setCurrentDictOptions(dictOptions) {
        this.dictOptions = dictOptions
      },
      //选中值
      selectChange(selectedValue) {
        if (selectedValue && selectedValue.length > 0) {
          const valueStr = selectedValue.join(this.spliter)
          this.$emit('change', valueStr);
          const textStr = this.textListStrHandle(selectedValue)
          this.$emit('changeOk',{value:valueStr,text:textStr})
        } else {
          this.arrayValue = []
          this.dictOptions = []
          this.$emit('change', null);
          this.$emit('changeOk',{value:null,text:null})
        }
      },
      //拼接选中的text
      textListStrHandle(array2) {
         const newestValue = array2.pop()
         const array1 = this.dictOptions
         const newestText = array1.filter(s=>s.value === newestValue)[0].text
         this.textStrData.push(newestText)
         return this.textStrData.length>0 ? this.textStrData.join(',') : ''        
      },
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>
<style scoped>
 /deep/.el-input__inner{
    min-height: 40px !important;
 }
</style>